Div doesn't expand for content, help?

10 New Member

Hello,

I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline & embedded CSS just now as It's just a quick test page I'm working on. Basically I've got my container div, two other div columns inside with fixed widths. In the 2nd column I have 2 divs, one is under the other, which exceeds the size of the browser. Anyway, that's fine, but the containerdiv doesn't expand by the browser size. I want it to go right down and expand to whatever, but it won't.
Some solutions I've tried:

. Adding an extra div with clear:both
. Adding overflow:hidden in the container (It hides the rest of the browser and doesn't let me scroll down)
. Taking the height:100% attribute out of the body, the container and html selectors to see if it extends automatically

No luck on all costs. The container div is just stoppping at the size of the browser, doesn't go underneath when i scroll.

Here's my code:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>sfkdgbgdsf</title>

<style type="text/css">

html {

height:100%;

}
 
.funkybox {

background-color:black; 

color:gray; 

border-style:thin solid; 

border-width:1px; 

border-color:red;

}
 
.boxbg {

background-color:black;

color:gray;

}

</style>
 
</head>
 
<body style="height:100%; margin-top:0px; margin-bottom:0px; background-color:#262626; text-align:center; color:white;">
 
<div id="container" style="width:900px; height:100%; margin-left:auto; margin-right:auto; background-color:black; background-position:center;">
 
<div style="height:6px;"></div>
 
<div id="heading" style="font-family:'times roman', arial, verdana; font-size:1.5em; width:886px; height:50px; border-style:solid; background-position:center; margin-left:auto; margin-right:auto;  border-color:gray; border-width:1px; background-color:#262626; color:yellow; filter:alpha; opacity:60%; font-weight:normal; text-align:center; margin-bottom:10px; x; text-decoration:underline; padding-top:8px;">Andrew's CSS Test Page</div>
 
<div id="left column" style="width:125px; float:left; margin-left:14px;">
 
  <div id="menu" style="width:125px; height:267px; background-color:black;          filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC;  border-width:1px; ">
 
 Content
  
  <div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  Content

  </div>
 
  <div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">

    Content

  </div>
 
   <div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">

  Content

   </div>

</div>
 
<div id="middle column" style="width:700; margin-left:10px; margin-bottom:0px; float:left; text-align:left;">
 
  <div style="width:590px; background-color:black; color:white; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; padding:5px; line-height:25px;">
  Content

  </div>
 
  <div style="width:200px; height:200px; background-color:white;">

  </div>
 
 </div>
 
</div>

</body>

</html>

Aug 21 '08 #1

Subscribe Reply

12802

David Laakso

397

Recognized Expert Contributor

Assuming I understood the question:
Among other things, the markup was invalid, you neglected to enclose the floats, and closed the divisions in the wrong order.
Corrections on the file below. Cursory checked local IE/6, IE/7, and compliant browsers.
FWIW, it's a lot easier to de-bug a file that has all the styles embedded in the head of the document.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="generator" content=

"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
 
<title>sfkdgbgdsf</title>

<style type="text/css">

/*<![CDATA[*/
 
      html {
 
      /*height:100%;*/
 
      }

       .funkybox {
 
      background-color:black;
 
      color:gray;

        border-style:thin solid;  

      border-width:1px;

      border-color:red;

        }
 
      .boxbg {

       background-color:black;

       color:gray;  

      }
 
/*]]>*/

</style>

</head>
 
<body style=

"/*height:100%;*/ margin-top:0px; margin-bottom:0px; background-color:#262626; text-align:center; color:white;">

<div id="container" style=

"border:1px solid #fff; width:900px; height:100%; margin-left:auto; margin-right:auto; background-color:black; background-position:center;overflow:hidden">

<div style="height:6px;"></div>
 
<div id="heading" style=

"font-family:'times roman', arial, verdana; font-size:1.5em; width:886px; height:50px; border-style:solid; background-position:center; margin-left:auto; margin-right:auto; border-color:gray; border-width:1px; background-color:#262626; color:yellow; filter:alpha; opacity:60%; font-weight:normal; text-align:center; margin-bottom:10px; x; text-decoration:underline; padding-top:8px;">

Andrew's CSS Test Page

</div>
 
<div id="left-column" style=

"width:125px; float:left; margin-left:14px; border: 1px solid red;overflow:hidden">

<div id="menu" style=

"width:125px; /*height:267px;*/ background-color:fuchsia; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px;">

Content
 
<div style=

"width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">

Content

</div>
 
<div style=

"width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">

Content

</div>
 
<div style=

"width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">

Content

</div>

</div>

</div>
 
<div id="middle-column" style=

"width:700; margin-left:10px; margin-bottom:0px; float:left;text-align:left;">

<div style=

"width:590px; background-color:black; color:white; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; padding: 5px; line-height:25px;">

Content

</div>
 
<div style="width:200px; height:200px; background-color:white;"></div>

</div>

</div>

</body>

</html>

Aug 21 '08 #2

AJM Project

New Member

Hi,

Sorry I'm quite new so bare with me. What do you mean by enclose the floats?

It seems when I posted the code (as I took content out to keep it down) I accidently took out one of the closing divs (the menu one), otherwise, the divs are in the wrong order, how?

Also, why have you put css quotes on the height attributes? I don't understand. Do I need them or not? and what actually fixed the problem?

ps. All the right side of the borders of the divs in the left column have now dissapeared.

Thank you for helping, I appreciate you taking the time to look through it. :D

Aug 23 '08 #3

David Laakso

397

Recognized Expert Contributor

If this valid online page [1] is not what you are looking for, then I misunderstood the question(s) and someone else will help you out.

[1] http://www.chelseacreekstudio.com/ca/cssd/test-30.html

overflow: hidden; was used on several containers to clear (enclose) the floats.
The goofy colors and borders were used to see if the floats were indeed cleared-- and so we both could see the selectors targeted.

Your columns were out of order because you opened the right column before you closed the sidebar.

I don't have time to list the other changes -- that's why I provided the file -- I sort of hoped you would compare my file with yours to see exactly what changed. Use the above online file for comparison.

Aug 23 '08 #4

AJM Project

New Member

Hello,

I did look and see what was changed. And as I said the closing div not being there was a mistake. I know what overflow does but as I am still pretty new to CSS I hadn't heard the term enclose before when relating to this.

You fixed my problem but what I just asked you was were the height attributes that you highlighted required? ie. why were they highlighted?

Basically to enable the container div to expand all the way in the future, I need to make the height attribute 100% and make sure all floated divs are enclosed?

Thanks

Aug 24 '08 #5

David Laakso

397

Recognized Expert Contributor

...but what I just asked you was were the height attributes that you highlighted required? ie. why were they highlighted?

Highlighted? I deleted them if that's what you mean?

Basically to enable the container div to expand all the way in the future, I need to make the height attribute 100% and make sure all floated divs are enclosed?

Yes the floats need to be cleared.
Normally height is not set on content bearing containers. It's ok in your little demo. But in a real world page, the height of the container(s) is determined by the amount of content. Put enough content in any container and it could expand vertically, even with text-scaling employed, from here to the Equator (if not further) without breaking out the bottom.

Most stuff will be a lot clearer for you if you embed all the styles in the head of the document. Put real content or "lorum ipsum" set at default in the containers And check the page in IE/6, IE/7 at text-size "largest"; and at least +2 font-scaling in a pre 3.0 Firefox browser, Safari, and Camino-- and with font zoom in Opera. The floats should not drop, and the text should not shoot out the bottom of any container. Coping with long words breaking out horizontally from narrow containers is yet another matter...

Aug 24 '08 #6

AJM Project

New Member

Excellent, I feel I understand a lot more now. Thank you David. :D

Aug 24 '08 #7

by: ma bel | last post by:

I need help. The problem occurrs when the browser is too small to view the content. It shows a scrollbar, but when you slide the scrollbar over, the header and the footer aren't as wide as the...

HTML / CSS

what makes a div expand ?

by: red | last post by:

This page shows 3 divs side by side surrounded by a wrapper, but the wrapper thinks there's nothing in it, so its collapsed at the top. How do I get the wrapper to expand around the divs ?...

HTML / CSS

expand and collapse all

by: peter | last post by:

I use the click-to-expand menu at http://javascript.internet.com/navigation/click-to-expand-menu.html This works fine, but is there a way to expand or collapse all the menus? An example of how...

Javascript

FolderBrowserDialog doesn't initialize

by: ImageAnalyst | last post by:

I'm trying to have the user browse to a folder, once they click a button, using the standard FolderBrowserDialog tool, System.Windows.Forms.FolderBrowserDialog. I'm using VB.Net 2005. There is a...

Visual Basic .NET

how do I get my div wrapper to expand?

by: Bob Imperial | last post by:

Hi folks! In need of some enlightenment here, I'm trying to get my wrapper div to expand to accommodate height-wise, to whatever content is placed in it, no luck yet and I realize it's probably...

HTML / CSS

child div: contract/expand depending on content

by: amygdala | last post by:

HTML / CSS

Liquid tableless layout, height difficulties (expand OK, shrink not OK)

by: ge5talt | last post by:

Longtime reader, 1st time poster :) I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on...

HTML / CSS

ComboBox property "Auto Expand", the combobox doesn't open by typing

by: Simon van Beek | last post by:

Dear reader, What can be wrong in my ComboBox, the property "Auto Expand" is set to Yes, but by typing in the ComboBox it doesn't expand. Is this because the source of the ComboBox is a...

Microsoft Access / VBA

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Div doesn't expand for content, help?

Similar topics